<template>
    <el-container>
        <el-header>
            <br/>
            <el-row justify="space-between" >
                <el-col :span="16">
                    <el-button type="info" plain>p07021450</el-button>
                    <el-button type="primary" @click="checkDevice" >扫描</el-button>
                    <el-input
                        v-model="input3"
                        style="width: 240px; margin-left: 10px"
                        placeholder="请输入IP地址"
                        >
                        <template #append>
                            <el-button>手动添加</el-button>
                        </template>
                    </el-input>
                    <el-button>清空</el-button>
                    
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" plain>本机：</el-button>
                    <el-button type="primary" plain>刷新:</el-button>                            
                    <el-button type="primary" plain>数量:</el-button>
                    <el-button type="primary" plain>上限:</el-button>
                </el-col>               
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <el-col>
                    <el-table :data="tableData" style="width: 100%" border stripe>
                        <el-table-column type="index" width="50" />
                        <el-table-column prop="date" label="IP" />
                        <el-table-column prop="name" label="设备ID" />
                        <el-table-column prop="state" label="固件版本"  />
                        <el-table-column prop="city" label="版本" />
                        <el-table-column prop="address" label="状态" />
                        <el-table-column fixed="right" label="操作">
                        <template #default>
                            <el-button type="primary" size="small" @click="handleClick">绑定</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>


    <el-dialog
        v-model="dialogVisible"
        title="登录"
        width="500"
    >
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            label-position="top"
            class="demo-ruleForm"
        >
            <el-form-item label="账户" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="checkPass">
                <el-input
                    v-model="ruleForm.checkPass"
                    type="password"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item label="验证码" prop="age">
                <el-input v-model.number="ruleForm.age">
                    <template #append>
                        <el-button>获取验证码</el-button>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>

        <template #footer>
        <div class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
            <el-button type="primary" @click="dialogVisible = false">
            登录
            </el-button>
        </div>
        </template>
    </el-dialog>
    
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ipc } from '@/utils/ipcRenderer';

const ruleFormRef = ref()

const dialogVisible = ref(true)
const input3 = ref('')
const handleClick = () => {
  console.log('click')
}


const tableData = [
  {
    date: '192.168.1.125',
    name: '45b2f578f9f0072f744fc98204873163',
    state: 'QL-q1-2025.v0.3.0.202502131701',
    city: 'Los Angeles',
    address: '未安装',
  }
]

const checkAge = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入验证码'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字'))
    } else {
      if (value < 18) {
        callback(new Error('验证码必须大于18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次输入的密码不匹配!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})

const checkDevice = async () => {
  const result = await ipc.invoke('controller/example/test', {params: input3.value});
  alert(result)
}





</script>